<template>
  <div>
    <search @on-select-thing="onThingSelect"></search>

    <alarm-events-list
      :alarmList="alarmList"
      :tmodel="currentModel"
      :tid="thingid"
      @on-modal-changed="onModalChanged"
      @refresh-alarms="refreshAlarms"
    ></alarm-events-list>
  </div>
</template>
<script>
import AlarmEventsList from "@/components/cfg/AlarmEventsList.vue";
import { getEventsFromModel } from "@/services/tmodelExplain";
import { refreshDevRule } from "@/services/rule";
import Search from "@/components/search/Search.vue";

export default {
  components: { Search, AlarmEventsList },
  data() {
    return {
      searchText: "",
      alarmList: [],
      thingid: "",
      thing: null,
      currentModel: null,
    };
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      //因为当钩子执行前，组件实例还没被创建
      // vm 就是当前组件的实例相当于上面的 this，所以在 next 方法里你就可以把 vm 当 this 来用了。
      //console.log(vm); //当前组件的实例
      if (to.query && to.query.thing) {
        vm.thing = to.query.thing;
        vm.thingid = to.query.thing.uid
        vm.refreshAlarms();
      }
    });
  },
  methods: {
    onSearch(value) {
      console.log("--------", value);
    },
    refreshAlarms() {
      let self = this;
      this.$store
        .dispatch("tmodel/refreshTModelByID", this.thing.model_id)
        .then((model) => {
          if (model) {
            console.log("(((((((((())))))))", model);
            self.currentModel = model;
            let alarmList = getEventsFromModel(model);
            refreshDevRule(self.thingid, alarmList).finally(() => {
              self.alarmList = alarmList;
            });
          }
        });
    },
    onThingSelect(uid, thing) {
      console.log("#@@@@-------", uid);
      this.thingid = uid;
      this.thing = thing;
      this.refreshAlarms();
    },
    onModalChanged() {
      console.log("#@@@@---vvvvvv----", uid);
      this.onThingSelect(this.thingid, this.thing);
      this.refreshAlarms();
    },
  },
};
</script>